<template>
  <el-row :gutter="20" ref="parent">
    <el-col :span="8">
      <div class="section">
      <div class="border-row"></div>
      <div class="border-col"></div>
      
      <div class="section-header">用人单位行业分布占比</div>
      <div :style="chartsDom" v-if="jz">
         <swiper :options="data4.length>3?swiperOption2:''" ref="mySwiper" v-if="data4.length" :style="chartsDom">
          <swiper-slide v-for="(item, index) in data3" :key="index">
            <el-row  class="data1-item">
              <el-col class="name-item" :span="12">
                <span class="data1-item-text middle-align" v-if="index < 2 || index === 2">
                  <span :class="`rank-icon rank-icon-${index+1}`"></span>
                  <span>{{item.name}}</span>
                </span>
                <span class="data1-item-text" :span="12" v-else>
                  <span class="rank-icon">{{index+1}}</span>
                  <span>{{item.name}}</span>
                </span>
              </el-col>
              <el-col :span="12" class="rank-value">
                <span v-if="index < 2 || index === 2" style="top: 4px;">({{(item.value/data3ValueTotal*100).toFixed(2)}}%)</span>
                <span v-else>({{(item.value/data3ValueTotal*100).toFixed(2)}}%)</span>
              </el-col>
            </el-row>
          </swiper-slide>
         </swiper>
      </div>
             <animae-jz  :style="chartsDom" v-if="!jz"></animae-jz>
    </div>
    </el-col>
    <el-col :span="8">
      <div class="section">
      <div class="border-row"></div>
      <div class="border-col"></div>
      
      <div class="section-header">岗位缺口TOP10</div>
      <div :style="chartsDom" v-if="jz2">
        <swiper :options="data2.length>6?swiperOption2:''" ref="mySwiper" v-if="data2.length" :style="chartsDom">
          <!-- slides -->
          <swiper-slide v-for="(item, index) in data2" :key="index">
            <el-row class="data1-item">
              <el-col :span="18">
                <span class="data1-item-text middle-align" v-if="index < 2 || index === 2">
                  <span :class="`rank-icon rank-icon-${index+1}`"></span>
                  <span>{{item.JobName}}</span>
                </span>
                <span class="data1-item-text" v-else>
                  <span class="rank-icon">{{index+1}}</span>
                  <span>{{item.JobName}}</span>
                </span>
              </el-col>
              <el-col :span="6" class="rank-value">
                <span v-if="index < 2 || index === 2" style="top: 4px;">{{item.Number}}</span>
                <span v-else>{{item.Number}}</span>
              </el-col>
            </el-row>
          </swiper-slide>
        </swiper>
      </div>
             <animae-jz  :style="chartsDom" v-if="!jz2"></animae-jz>
    </div>
    </el-col>
    <el-col :span="8">
      <div class="section">
      <div class="border-row"></div>
      <div class="border-col"></div>
      
      <div class="section-header">岗位供给TOP10</div>
      <div :style="chartsDom" v-if="jz3">
        
        <swiper :options="data1.length>6?swiperOption2:''" ref="mySwiper" v-if="data1.length" :style="chartsDom">
          <!-- slides -->
          <swiper-slide v-for="(item, index) in data1" :key="index">
           <el-row class="data1-item">
              <el-col :span="18">
                <span class="data1-item-text middle-align" v-if="index < 2 || index === 2">
                  <span :class="`rank-icon rank-icon-${index+1}`"></span>
                  <span>{{item.JobName}}</span>
                </span>
                <span class="data1-item-text" v-else>
                  <span class="rank-icon">{{index+1}}</span>
                  <span>{{item.JobName}}</span>
                </span>
              </el-col>
              <el-col :span="6" class="rank-value">
                <span v-if="index < 2 || index === 2" style="top: 4px;">{{item.Number}}</span>
                <span v-else>{{item.Number}}</span>
              </el-col>
            </el-row>
          </swiper-slide>
        </swiper>
      </div>
             <animae-jz  :style="chartsDom" v-if="!jz3"></animae-jz>
    </div>
    </el-col>
  </el-row>
</template>
<script>
import {
  get_JobTable_JobSupplyTop10,
  get_JobTable_TalentGapTop10,
  get_JobTable_ProportionIndustry
} from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      data1: [],
      data2: [],
      data3: null,
      data4:[
      ],
      jz:true,
      jz2:true,
      jz3:true,
      swiperOption2:{
        autoplay:{
          delay:3000
        },
        direction:'vertical'
      }
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.$el.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: (val / 3) - 22 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red',
        'overflow': 'hidden',
        'left': '-6px'
      }
      }
    },
    data3ValueTotal() {
      return eval(this.data3.map(v=>v.value).join('+'))
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    console.log(this.$refs.parent.$el.offsetWidth)
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      this.jz=false
       this.jz2=false
        this.jz3=false
      get_JobTable_JobSupplyTop10(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        this.data1 = data.length>0? data:[];
		console.log('get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10get_JobTable_JobSupplyTop10')
		console.log(this.data1)
      })
      get_JobTable_TalentGapTop10(this.dateProp)
      .then(({data:{data}})=>{
        this.jz2=true
        this.data2 = data.length>0?data : [];
		console.log('get_JobTable_TalentGapTop10get_JobTable_TalentGapTop10get_JobTable_TalentGapTop10get_JobTable_TalentGapTop10')
		console.log(this.data2)
      })
      get_JobTable_ProportionIndustry(this.dateProp)
      .then(({data:{data}})=>{
        this.jz3=true
        this.data3 = data.length>0? data : []
        this.data4 = data
        console.log('get_JobTable_ProportionIndustry')
        console.log(this.data3)
      })
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px
  .data1-item
    margin-top 15px
    display flex
    white-space nowrap
    color #8ebafb
    font-size 14px
    position relative
    .data1-item-text
      padding-left 15px
    .middle-align *
      vertical-align middle
    .rank-value
      text-align right
      padding-right 15px
      position relative
      span
        position relative
    .name-item{
      width 120%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
    .rank-icon
      color #fff
      &.rank-icon
        width 18px
        height 24px
        background-size 100% auto
        display inline-block
        position relative
        &-1
          background url(../../../assets/images/rank-01.png) no-repeat
          left -4px
        &-2
          background url(../../../assets/images/rank-02.png) no-repeat
          left -4px
        &-3
          background url(../../../assets/images/rank-03.png) no-repeat
          left -4px
    .swiper-container{
      height auto !important 
    }
</style>